<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片评选</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
    <div class="container">
        <p class="title">第二届学员摄影大赛</p>
        <div class="banner" style="background: url(images/banner.jpg) no-repeat;background-size: cover"></div>
        <div class="info">

            <p>活动截止时间：2017 年 11 月 11 日</p>
            <p>规则：每人每日限投一票，每票限投一人</p>
        </div>
        <ul id="fall-wrap" style="height: 600px">
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/1.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/2.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/3.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/4.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/5.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/6.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
         <!--  <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/7.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/8.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/9.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/10.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/11.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/12.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/13.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/14.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>

           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/15.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
           <li class="box">
                <a href="javascript:void(0)">
                    <img src="images/2.jpg" alt="">
                    <p class="user">Java-01班-马亮</p>
                    <p class="like">
                        <span >105</span>票
                    </p>
                    <input type="button" value="投票" class="btn">
                </a>
            </li>-->
        </ul>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="plugins/layui/layui.js"></script>
    <script src="plugins/masonry/js/masonry-docs.js"></script>
    <script>
        layui.use('flow', function(){
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;

            var $container = $('#fall-wrap');
            $container.imagesLoaded(function() {
                $container.masonry({
                    itemSelector: '.box',
                    gutter: 5,
                    isAnimated: true
                });
            });

            $(window).on('scroll',function(){
                if( $(document).scrollTop() + $(window).height() > $(document).height() - 10) {
                    debugger;
                }
            });

           /* flow.load({
                elem: '#fall-wrap' //指定列表容器
                ,scrollElem:"#fall-wrap"
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    debugger;
                    var lis = [];
                    for(var i = 0 ; i < 5; i ++) {
                        lis.push(' <li class="box"><a href="javascript:void(0)"> <img src="images/'+(i+1)+'.jpg" alt=""> <p class="user">Java-01班-马亮</p> <p class="like"> <span >105</span>票 </p> <input type="button" value="投票" class="btn"> </a> </li>');
                    }

                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), false);

                }
            });*/
        });

    </script>
</body>
</html>